<template>
    <div class="flex-row how-work-body">

        <FullHeadImg backImage="marketplace/hw_head_bg.png">
            <template #default>
                <h1>What can I invest in?</h1>
            </template>
        </FullHeadImg>

        <section class="invest-in body-m">
            <p>
                Over the last two decades, we’ve seen a major shift in how capital flows—moving steadily from public
                markets into private ones. Since the early 2000s, assets in the private market have grown tenfold,
                now topping $6 trillion globally.1 Traditionally, these kinds of investments — think private equity,
                venture capital, real estate, and even assets like art and crypto — were only accessible to
                institutions and ultra-wealthy individuals. Although these asset classes often play a big role in
                the portfolios of high-net-worth investors, everyday individuals were largely left out.
            </p>
            <p>
                Regulatory hurdles and the inherent risks of private markets kept the average person on the
                sidelines.2 That’s where Honeybee comes in, investing in private markets is no longer limited to the
                few, Honeybee opens the door for anyone to back startups, real estate deals, local businesses,
                growth-stage companies, crypto projects, and more.
            </p>
            <p>
                When you invest through Honeybee, you’re not just putting your money into a company — you’re
                supporting the vision of founders, creators, and entrepreneurs shaping the future of our planet. Our
                mission is simple: democratize access to alternative investments, empower individuals with
                knowledge, and help more people invest in what they truly believe in.
            </p>

            <h4 class="platform-title">
                Honeybee puts private investment opportunities right at your fingertips. What you choose to invest
                in is completely up to you — here’s a look at the kinds of options you’ll find on the platform:
            </h4>
            <div class="work-platform">
                <div class="gradient-card" v-for="(item, idx) in howItWorkConfig.workPlatforms" :key="idx">
                    <img :src="getImage(item.image)" alt="">
                    <div>{{ item.desc }}</div>
                </div>
            </div>
        </section>

        <section class="what-you-get body-m">
            <h2>What you get when you invest?</h2>
            <p>
                When you invest through Honeybee, you're providing capital in exchange for a financial interest in a
                company, fund, or project. This interest is governed by a formal bilateral agreement between you and the
                entity raising funds.
            </p>
            <div class="you-get-item" v-for="(item, idx) in howItWorkConfig.youGets" :key="idx">
                <div>
                    <img :src="getImage(item.image)" alt="">
                    <h3>{{ item.title }}</h3>
                </div>
                <p class="you-get-item-desc">{{ item.desc }}</p>
            </div>
        </section>

        <section class="how-it-work body-m">
            <h2>How returns work? </h2>
            <div>
                Investors can earn returns when the projects, funds, or companies they invest in through Honeybee
                perform well. The potential for returns and the associated risks vary depending on the type of
                investment, and there are multiple ways to generate profits.

                <el-tooltip placement="top">
                    <template #content>
                        <div style="max-width: 80vw; font-size: 1rem;">Investing in private markets is risky and there
                            are no guarantees of a return. Most of the investments on Honeybee are illiquid and
                            long-term investments, meaning you should expect your cash to be inaccessible after an
                            investment is finalized.
                        </div>
                    </template>
                    <sup>1</sup>
                </el-tooltip>
            </div>
            <div>
                Each investment is structured differently, and the potential returns depend on the specific terms of the
                offering.
                Some investments provide a lump sum payout, while others may offer ongoing, recurring payments. Across
                all
                businesses within the Honeybee ecosystem, we've facilitated over USD25 million in payments from issuers
                to
                investors, spanning sectors like startups, crypto mining, real estate, and more.
            </div>
        </section>

        <section class="who-deal-terms full-bg">
            <div class="body-m">
                <h2>What are deal terms?</h2>
                <p>
                    When startups raise capital on Honeybee, they define their own deal terms. Here’s a breakdown of how
                    it all
                    works to help guide your next investment.
                </p>

                <div class="deal-terms-item" v-for="(item, idx) in howItWorkConfig.dealTerms" :key="idx">
                    <h3>{{ item.title }}</h3>
                    <b>{{ item.desc }}</b>
                    <ul>
                        <li v-for="(listItem, idx) in item.list" :key="idx">
                            <span class="deal-point" v-if="listItem.point.length > 0">{{ listItem.point }}</span>
                            <span>{{ listItem.desc }}</span>
                        </li>
                    </ul>

                </div>
            </div>
        </section>

        <section class="take-diligence body-m">
            <h2>Take control of you own due diligence</h2>
            <p>
                Doing your homework before investing takes time — but it’s worth it. When you’re putting money into a
                private
                investment, it’s critical to dig into the financials, understand the risks, and assess the potential
                upside.
                Every opportunity on Honeybee comes with its own set of risks and rewards. Whether you're just starting
                out or looking to refine your approach, here’s a useful checklist to guide your decisions:
            </p>
            <div v-for="(item, idx) in howItWorkConfig.diligences" :key="idx">
                <h3>{{ item.title }}</h3>
                <p>{{ item.desc }}</p>
            </div>
        </section>

        <section class="due-diligence full-bg">
            <div class="body-m">
                <h2>Do your due diligence</h2>
                <p>Take time to read through the details — and then read them again. Some things to focus on:
                </p>

                <ul>
                    <li v-for="(item, idx) in howItWorkConfig.dueDiligence" :key="idx">
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.desc }}</p>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</template>

<script setup lang="ts" name="HowWork">
import marketPlace from '@/utils/marketPlaceConfig';
import { computed } from 'vue';

const howItWorkConfig = computed(() => {
    return marketPlace.howItWorksConfig
})

</script>

<style scoped lang="scss">
.how-work-body {
    flex-direction: column;
}

h3 {
    font-size: 1.3rem;
}

.invest-in {

    p {
        padding-bottom: 1rem;
    }

    h4 {
        padding: 2rem 0;
    }

    .work-platform {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;

        .gradient-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;

            img {
                width: 50px;
                height: 50px;
            }
        }
    }
}

.what-you-get {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .you-get-item {
        div {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding-top: 1rem;

            img {
                width: 35px;
            }
        }
    }
}

.how-it-work {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.who-deal-terms {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;

    .deal-terms-item {
        padding-top: 1rem;

        h3 {
            background-color: #F5D623;
            display: inline-block;
            border-radius: 100px;
            padding: 0 2rem;
        }

        b {
            display: block;
            padding: 1rem 0;
        }

        ul {
            list-style-type: disc;
            padding-left: 20px;

            li {
                padding-left: 5px;

                .deal-point {
                    font-weight: 600;
                    color: black;
                    padding-right: 10px;
                }
            }
        }
    }
}

.take-diligence {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.due-diligence {
    padding: 2rem 0;

    h2 {
        padding-bottom: 1rem;
    }

    ul {
        list-style-type: none;

        li {
            h3 {
                padding-top: 1rem;
            }
        }
    }
}

@media (max-width: 650px) {
    .invest-in .work-platform {
        grid-template-columns: repeat(1, 1fr);
    }
}
</style>